<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cursor Hotspot Viewer</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f5f5f5;
      }

      .header {
        text-align: center;
        margin-bottom: 30px;
      }

      .cursor-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .cursor-item {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
      }

      .cursor-name {
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
      }

      .cursor-hash {
        font-size: 10px;
        color: #666;
        margin-bottom: 15px;
        word-break: break-all;
      }

      .cursor-container {
        position: relative;
        display: inline-block;
        border: 2px solid #ddd;
        border-radius: 4px;
        background:
          linear-gradient(45deg, #ccc 25%, transparent 25%),
          linear-gradient(-45deg, #ccc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #ccc 75%),
          linear-gradient(-45deg, transparent 75%, #ccc 75%);
        background-size: 10px 10px;
        background-position:
          0 0,
          0 5px,
          5px -5px,
          -5px 0px;
        cursor: crosshair;
      }

      .cursor-svg {
        display: block;
        width: 200px;
        height: 200px;
        pointer-events: none;
        object-fit: contain;
      }

      .cursor-svg.macos {
        width: 200px;
        height: 200px;
      }

      .hotspot {
        position: absolute;
        width: 6px;
        height: 6px;
        background: rgba(255, 0, 0, 0.6);
        border-radius: 1px;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      .hotspot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 1px;
        background: black;
        transform: translate(-50%, -50%);
      }

      .hotspot-info {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }

      .mouse-position {
        margin-top: 5px;
        font-size: 11px;
        color: #999;
        min-height: 15px;
      }

      .copy-button {
        display: none;
      }

      .platform-section {
        margin-bottom: 40px;
      }

      .platform-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
      }

      .todo-marker {
        background: #fff3cd;
        color: #856404;
        padding: 5px;
        border-radius: 4px;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Cursor Hotspot Viewer</h1>
      <p>
        Hover over cursors to see mouse coordinates, click to copy
        hotspot values
      </p>
    </div>

    <div class="platform-section">
      <h2 class="platform-title">macOS Cursors</h2>
      <div class="cursor-grid" id="macos-cursors"></div>
    </div>

    <div class="platform-section">
      <h2 class="platform-title">Windows Cursors</h2>
      <div class="cursor-grid" id="windows-cursors"></div>
    </div>

    <script>
      const cursors = {
        macos: [
          {
            name: "arrow",
            hash: "de2d1f4a81e520b65fd1317b845b00a1c51a4d1f71cca3cd4ccdab52b98d1ac9",
            svg: "assets/mac/arrow.svg",
            hotspot: [0.302, 0.226],
          },
          {
            name: "contextual_menu",
            hash: "ab26ca862492d41355b711c58544687a799dd7ae14cf161959ca524bbc97c322",
            svg: "assets/mac/contextual_menu.svg",
            hotspot: [0.278, 0.295],
          },
          {
            name: "closed_hand",
            hash: "fbb165d4603dd8808b536f45bb74a9a72d9358ad19714b318bb7c06358a7d3c2",
            svg: "assets/mac/closed_hand.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "crosshair",
            hash: "c583f776531f4e7b76ea7ba2ab159765e2da11fd63cb897cc10362183859d1d8",
            svg: "assets/mac/crosshair.svg",
            hotspot: [0.52, 0.51],
          },
          {
            name: "drag_copy",
            hash: "af060876004c8647d82411eeac1bbd613d2991d46794aba16b56c91d3081e128",
            svg: "assets/mac/drag_copy.svg",
            hotspot: [0.255, 0.1],
          },
          {
            name: "drag_link",
            hash: "59ac2483461f4ad577a0a6b68be89fe663c36263b583c5f038eee2ae6a5ad98f",
            svg: "assets/mac/drag_link.svg",
            hotspot: [0.621, 0.309],
          },
          {
            name: "ibeam",
            hash: "492dca0bb6751a30607ac728803af992ba69365052b7df2dff1c0dfe463e653c",
            svg: "assets/mac/ibeam.svg",
            hotspot: [0.484, 0.520],
          },
          {
            name: "open_hand",
            hash: "3f6a5594a3c9334065944b9c56d9f73fd5fe5f02108a5e28f37e222e770be476",
            svg: "assets/mac/open_hand.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "operation_not_allowed",
            hash: "37287ef1d097704d3e9d0be9c1049ce1fb6dfabd6d210af0429b1b6ec7084c59",
            svg: "assets/mac/operation_not_allowed.svg",
            hotspot: [0.24, 0.1],
          },
          {
            name: "pointing_hand",
            hash: "b0443e9f72e724cb6d94b879bf29c6cb18376d0357c6233e5a7561cf8a9943c6",
            svg: "assets/mac/pointing_hand.svg",
            hotspot: [0.342, 0.172],
          },
          {
            name: "resize_down",
            hash: "3c9bf0ce893b64fe9e4363793b406140d4b3900b7beafa1c409e78cf5a8cf954",
            svg: "assets/mac/resize_down.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "resize_left",
            hash: "50431d8fd537119aefb4c3673f9b9ff00d3cd1d2bf6c35e5dfb09ed40cfd5e7c",
            svg: "assets/mac/resize_left.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "resize_left_right",
            hash: "0fdaea89910bcbe34ad0d4d63a6ada2095489df18537bbf54dd0d0769588b381",
            svg: "assets/mac/resize_left_right.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "resize_right",
            hash: "e74de88f863f059e5beb27152b2dfc2cd1e8dcc458ce775607765e9a4859667e",
            svg: "assets/mac/resize_right.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "resize_up",
            hash: "912ca42451a9624f6fb8c1d53c29c26782b7590d383a66075a6768c4409024d9",
            svg: "assets/mac/resize_up.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "resize_up_down",
            hash: "9c93eb53df68d7fd86298ba1eb3e3b32ccd34d168b81a31a6fc4bb79f131331f",
            svg: "assets/mac/resize_up_down.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "ibeam_vertical",
            hash: "024e1d486a7f16368669d419e69c9a326e464ec1b8ed39645e5c89cb183e03c5",
            svg: "assets/mac/ibeam_vertical.svg",
            hotspot: [0.51, 0.49],
          },
          {
            name: "tahoe_arrow",
            hash: "57a1d610df3e421ebef670ba58c97319d2ab6990d64dca34d28140e4527fd54d",
            svg: "assets/mac/tahoe/default.svg",
            hotspot: [0.320, 0.192],
          },
          {
            name: "tahoe_contextual_menu",
            hash: "877e1c153d942d18ddfe88e72e2f34ad4435a6839fc447c1a32a71e6bbe1104c",
            svg: "assets/mac/tahoe/context-menu.svg",
            hotspot: [0.495, 0.352],
          },
          {
            name: "tahoe_closed_hand",
            hash: "bc1a01ced20ea38eda8f0eb1976bfe74ac39150ed9a044d3df918faf3dff15ae",
            svg: "assets/mac/tahoe/grabbing.svg",
            hotspot: [0.539, 0.498],
          },
          {
            name: "tahoe_crosshair",
            hash: "0aa0d950a742ed4802ed44095cbf5834de3eea84bf78026cacb8e2c37d244f46",
            svg: "assets/mac/tahoe/crosshair.svg",
            hotspot: [0.52, 0.51],
          },
          {
            name: "tahoe_disappearing_item",
            hash: "f44a524d6fcfe5a1b1bebf23fcb12fbfeaea0ecf92beb7f69fdf586c319dd8ab",
            svg: null,
            hotspot: null,
            todo: true,
          },
          {
            name: "tahoe_drag_copy",
            hash: "93d05bf80e702fdf5d6924447c91a0ab5fb196251d5758e98c5b6a5f08f0e960",
            svg: "assets/mac/drag_copy.svg",
            hotspot: [0.255, 0.1],
          },
          {
            name: "tahoe_drag_link",
            hash: "00cdb9c59246bf98172a027a94b323498bf8d82c701c4d0d85c6e452549fa351",
            svg: "assets/mac/drag_link.svg",
            hotspot: [0.621, 0.309],
          },
          {
            name: "tahoe_ibeam",
            hash: "3de4a52b22f76f28db5206dc4c2219dff28a6ee5abfb9c5656a469f2140f7eaa",
            svg: "assets/mac/tahoe/text.svg",
            hotspot: [0.493, 0.464],
          },
          {
            name: "tahoe_open_hand",
            hash: "a6f87e2749a5a6799c04ca8e1782194b770a2b5f966e70b79c7c245222176ec5",
            svg: "assets/mac/tahoe/grab.svg",
            hotspot: [0.543, 0.515],
          },
          {
            name: "tahoe_operation_not_allowed",
            hash: "48941d14eefe97e53fe38531c0f927d71fbd3e63b32e1e10e0a4ff729d64e320",
            svg: "assets/mac/operation_not_allowed.svg",
            hotspot: [0.24, 0.1],
          },
          {
            name: "tahoe_pointing_hand",
            hash: "cb0277925fa3ecca8bc54bc98b3ef1d5c08cfd4c6086733f4d849c675f68bf6f",
            svg: "assets/mac/tahoe/pointer.svg",
            hotspot: [0.425, 0.167],
          },
          {
            name: "tahoe_resize_down",
            hash: "825236ff95d98fd49868da5a588ad7077ea507e15ad0a4924495511d05c1bc35",
            svg: "assets/mac/tahoe/resize-s.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_resize_left",
            hash: "8a8608a42590e7c518f410aa0750894d2296c7a72e74e3a9dcceb72bc3bc2daf",
            svg: "assets/mac/tahoe/resize-w.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_resize_left_right",
            hash: "1db16810eb4c14a9c86807b15633d891298e4decd22ed650d8d5d2375f94d27e",
            svg: "assets/mac/tahoe/resize-ew.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_resize_right",
            hash: "426e4d72be3d8b97fadca5e1067c5a5c2c939e0bbe9c686947c60e3350f386cb",
            svg: "assets/mac/tahoe/resize-e.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_resize_up",
            hash: "95b05d0dd57d3a5c7198c7e8fbcf001c316530dd65de9ec26dde42ba9922e11b",
            svg: "assets/mac/tahoe/resize-n.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_resize_up_down",
            hash: "f919de8ef1e36cd95ec8805f6731e831cb5996a4e4403f7c62b6ff994d429451",
            svg: "assets/mac/tahoe/resize-ns.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "tahoe_ibeam_vertical",
            hash: "5113d2b572347a56228457ca3e96102934eb394c7d26c3d985d4ee146959d34a",
            svg: "assets/mac/ibeam_vertical.svg",
            hotspot: [0.51, 0.49],
          },
          {
            name: "tahoe_zoom_in",
            hash: "e539c32a13a6b2caf0e0a991a21d31f8d16cb9feee61fb4efc27a21d6dd6a177",
            svg: "assets/mac/tahoe/zoom-in.svg",
            hotspot: [0.549, 0.550],
          },
          {
            name: "tahoe_zoom_out",
            hash: "d2324ade560f68ce638bb2fd98e9ba2f08d219593afab6b94fb647b1c243d049",
            svg: "assets/mac/tahoe/zoom-out.svg",
            hotspot: [0.551, 0.552],
          },
        ],
        windows: [
          {
            name: "arrow",
            hash: "19502718917bb8a86b83ffb168021cf90517b5c5e510c33423060d230c9e2d20",
            svg: "assets/windows/arrow.svg",
            hotspot: [0.288, 0.189],
          },
          {
            name: "ibeam",
            hash: "77cc4cedcf68f3e1d41bfe16c567961b2306c6236b35b966cd3d5c9516565e33",
            svg: "assets/windows/ibeam.svg",
            hotspot: [0.490, 0.471],
          },
          {
            name: "wait",
            hash: "5991d86a0d4e915dd0cb0fdd9bef3bf37ed6a3b321256fcb5b240db7ac1a6324",
            svg: "assets/windows/wait.svg",
            hotspot: [0.5, 0.52],
          },
          {
            name: "cross",
            hash: "cd2c775b1a124e4deaed1ed345efae25eb28a9133fc39691555902a2c1d7d578",
            svg: "assets/windows/cross.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "size-nesw",
            hash: "47b4d609cb404feae70c7e20b525ac901d1e7a5f1a2e8a240418b3710ee43473",
            svg: "assets/windows/size-nesw.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "size-ns",
            hash: "253b9e5360de1e12561be6a8f84484d4b108fd54d31e7d2c8f3b66d1c71b9880",
            svg: "assets/windows/size-ns.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "no",
            hash: "7df883a459aced72acf32b969ff1119676d334d9acfcbe668ef92fe01094a7d6",
            svg: "assets/windows/no.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "hand",
            hash: "44a554b439a681410d337d239bf08afe7c66486538563ebb93dc1c309f0a9209",
            svg: "assets/windows/hand.svg",
            hotspot: [0.441, 0.143],
          },
          {
            name: "uparrow",
            hash: "823d642acdc51ffbc29c2710303606270ed24936daf45215ead531333df102ba",
            svg: "assets/windows/uparrow.svg",
            hotspot: [0.5, 0.05],
          },
          {
            name: "idcsizenwse",
            hash: "2daf2a40e4c7ecadec3270fbdb243a12ac22a14bb0b3a08a56b38a38322f9296",
            svg: "assets/windows/idcsizenwse.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "idcsizewe",
            hash: "8a024cf4bec4d58a4c149af2320206088981357312b3d82fbfcc07bee38c71ac",
            svg: "assets/windows/idcsizewe.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "sizeall",
            hash: "8066a12792e4e8ef21636e5ade61adaaf0fecc2ffc69536ffa0c2dd5bedc6903",
            svg: "assets/windows/sizeall.svg",
            hotspot: [0.5, 0.5],
          },
          {
            name: "appstarting",
            hash: "1486a2339478da61a52a6eecf8ee3446be62f12d375dba8befd42bb553eea7bf",
            svg: "assets/windows/appstarting.svg",
            hotspot: [0.055, 0.368],
          },
          {
            name: "idchelp",
            hash: "5d0b4df6188bc8d540abfbd4235199cc0f67fb41d5e0dcbfd40a3011f8808fea",
            svg: "assets/windows/idchelp.svg",
            hotspot: [0.056, 0.127],
          },
          {
            name: "idcpin",
            hash: "cb74a2d34774dbc43004882e43f9c058b2d2ee60184185567d0328ca013f5bc3",
            svg: "assets/windows/idcpin.svg",
            hotspot: [0.245, 0.05],
          },
          {
            name: "idcperson",
            hash: "1f5209791a75916697c26cf2d018d267ae1102c71dbd196de6c83132f5627f09",
            svg: "assets/windows/idcperson.svg",
            hotspot: [0.235, 0.05],
          },
          {
            name: "pen",
            hash: "7340ea75802db8fef3a103e9385e65b2c8c358e077ef949faaf572fb502dd9e2",
            svg: "assets/windows/pen.svg",
            hotspot: [0.055, 0.945],
          },
        ],
      };

      function createCursorElement(cursor, platform) {
        const item = document.createElement("div");
        item.className = "cursor-item";

        const name = document.createElement("div");
        name.className = "cursor-name";
        name.textContent = cursor.name;

        const hash = document.createElement("div");
        hash.className = "cursor-hash";
        hash.textContent = cursor.hash;

        const container = document.createElement("div");
        container.className = "cursor-container";

        const svg = document.createElement("object");
        svg.className =
          platform === "macos" ? "cursor-svg macos" : "cursor-svg";
        if (cursor.svg) {
          svg.data = cursor.svg;
          svg.type = "image/svg+xml";
        } else {
          svg.innerHTML = '<div class="todo-marker">TODO: SVG not available</div>';
        }

        const hotspotDiv = document.createElement("div");
        hotspotDiv.className = "hotspot";

        const hotspotInfo = document.createElement("div");
        hotspotInfo.className = "hotspot-info";

        const mousePosition = document.createElement("div");
        mousePosition.className = "mouse-position";

        const copyButton = document.createElement("button");
        copyButton.className = "copy-button";
        copyButton.textContent = "Copy Hotspot";

        if (cursor.hotspot) {
          hotspotInfo.textContent = `Hotspot: (${cursor.hotspot[0].toFixed(
            3,
          )}, ${cursor.hotspot[1].toFixed(3)})`;
        } else {
          hotspotInfo.innerHTML =
            '<span class="todo-marker">TODO: Hotspot not defined</span>';
        }

        // Add todo class to the entire item if it's marked as todo
        if (cursor.todo) {
          item.classList.add("todo-marker");
        }

        container.appendChild(svg);
        if (cursor.hotspot) {
          container.appendChild(hotspotDiv);
        }

        let currentMousePos = null;

        container.addEventListener("mousemove", (e) => {
          const rect = container.getBoundingClientRect();
          const x = (e.clientX - rect.left) / rect.width;
          const y = (e.clientY - rect.top) / rect.height;
          currentMousePos = [x, y];
          mousePosition.textContent = `Mouse: (${x.toFixed(3)}, ${y.toFixed(
            3,
          )})`;
        });

        container.addEventListener("mouseleave", () => {
          mousePosition.textContent = "";
          currentMousePos = null;
        });

        item.addEventListener("click", (e) => {
          // If mouse is over the container, use current mouse position
          if (currentMousePos) {
            const hotspotText = `(${currentMousePos[0].toFixed(
              3,
            )}, ${currentMousePos[1].toFixed(3)})`;
            navigator.clipboard.writeText(hotspotText).then(() => {
              mousePosition.textContent = "Copied!";
              setTimeout(() => {
                if (currentMousePos) {
                  mousePosition.textContent = `Mouse: (${currentMousePos[0].toFixed(
                    3,
                  )}, ${currentMousePos[1].toFixed(3)})`;
                } else {
                  mousePosition.textContent = "";
                }
              }, 1000);
            });
          } else if (cursor.hotspot) {
            // Fallback to defined hotspot if no current mouse position
            const hotspotText = `(${cursor.hotspot[0].toFixed(
              3,
            )}, ${cursor.hotspot[1].toFixed(3)})`;
            navigator.clipboard.writeText(hotspotText).then(() => {
              mousePosition.textContent = "Copied!";
              setTimeout(() => {
                mousePosition.textContent = "";
              }, 1000);
            });
          }
        });

        if (cursor.svg) {
          svg.addEventListener("load", () => {
            if (cursor.hotspot) {
              const rect = container.getBoundingClientRect();
              hotspotDiv.style.left = cursor.hotspot[0] * 100 + "%";
              hotspotDiv.style.top = cursor.hotspot[1] * 100 + "%";
            }
          });
        }

        item.appendChild(name);
        item.appendChild(hash);
        item.appendChild(container);
        item.appendChild(hotspotInfo);
        item.appendChild(mousePosition);
        item.appendChild(copyButton);

        return item;
      }

      function initializeCursors() {
        const macosContainer = document.getElementById("macos-cursors");
        const windowsContainer =
          document.getElementById("windows-cursors");

        cursors.macos.forEach((cursor) => {
          macosContainer.appendChild(
            createCursorElement(cursor, "macos"),
          );
        });

        cursors.windows.forEach((cursor) => {
          windowsContainer.appendChild(
            createCursorElement(cursor, "windows"),
          );
        });
      }

      document.addEventListener("DOMContentLoaded", initializeCursors);
    </script>
  </body>
</html>
